<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">积分充值</block>
		</cu-custom>
		<div>
			<image :src="imgurl+'/img03.png'" style="width: 100%;height: 165rpx;display: block;"></image>
		</div>
		<view class="qui-cells">
			<view class="qui-cell">
				<view class="cell-hd fs26 fw600">
					当前积分
				</view>
				<view class="cell-bd fs32 tr ff">
					<text class="fs24"></text><text v-text="parseInt(Balance)"></text>
				</view>
			</view>
			<view class="qui-cell border_none">
				<view class="cell-hd fs26 fw600">
					充值金额
				</view>
				<navigator class="cell-bd fs24 tr text-orange" url="/pages/my/jfDetail">
					充值明细
				</navigator>
			</view>
			<view class="qui-cell pt0 pb0" style="flex-wrap: wrap;" v-if="RechargeSet.IsFixedAmount==1 || RechargeSet.IsFixedAmount==3">
				<view class="cell-bd" v-for="(item,index) in FaceValue" style="white-space: nowrap;flex: none;">
					<view :class="paymentIndex != index ? 'num' : 'num num1'" @tap="selectMoney(index,item)">{{item}}元</view>
				</view>
			</view>
		</view>
		<view class="qui-cells" >
			<view class="qui-cell border_none" v-if="RechargeSet.IsFixedAmount==0 || RechargeSet.IsFixedAmount==3">
				<view class="cell-hd fs26 fw600">
					其他金额
				</view>
			</view>
			<view class="qui-cell border_none pt0" v-if="RechargeSet.IsFixedAmount==0 ||  RechargeSet.IsFixedAmount==3">
				<view class="flex radius10" style="background-color: #f7f7f7;padding: 20rpx;width: 100%;">
					<view class="fs36 fw600 mr10">￥</view>
					<input class="fs38 mt5 ff" type="digit" maxlength="8" v-reset-page placeholder="输入充值金额" v-on:change="changeRecharge" v-model="recharge" name="input"></input>
				</view>
			</view>
			<view class="qui-cell border_none ">
				<checkbox @tap="agree"/>
				<view class="fs26 text-muted flex ml20">我已阅读并理解<navigator class="text-blue">《充值服务协议》</navigator>
				</view>
			</view>
		</view>

		<view class="bottom_bar flex justify-between align-center" >
			<view>
				<view class="fs26 fw600">获得积分：<text class="fs32 ff text-orange"><text v-text="recharge*CaculateBili"></text></text></view>
				<view class="fs20 text-muted" style="margin-top: -60rpx;" v-if="send>0">额外赠送<text v-text="send"></text>积分</view>
			</view>
			<view  class="cz_btn" v-on:tap="Recharge">充值</view>
		</view>
	</view>
</template>

<script>
		import Vue from 'vue';
	import base from 'utils/base.js';
	import tools from 'utils/tools.js';
	
	Vue.directive('resetPage', {
	  inserted: function (el) {
	    // 监听键盘收起事件
	    document.body.addEventListener('focusout', () => {
	      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
	        //软键盘收起的事件处理
	        setTimeout(() => {
	          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
	          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
	        }, 100)
	      }
	    })
	  }
	})
	
	Array.prototype.sort = function () {
	    var arr = this;
	    for (var j = 0; j < arr.length - 1; j++) {
	        //两两比较，如果前一个比后一个大，则交换位置。
	        for (var i = 0; i < arr.length - 1 - j; i++) {
	            if (arr[i] > arr[i + 1]) {
	                var temp = arr[i];
	                arr[i] = arr[i + 1];
	                arr[i + 1] = temp;
	            }
	        }
	    }
	    return arr;
	}
	
	export default {
		data() {
			return {
				send:0,
				recharge:0,
				FaceValue:[],
				SendRule:[],
				RechargeSet:{},
				Balance:0,
				activeIndex: 0,
				paymentIndex: 0,
				modalName: null,
				imgurl: this.$imgurl,
				checkmoney: true,
				agree1:false,
				CaculateBili:0

			}
		},
		mounted(){
			this.GetRechargeSet();
			this.GetCurrencyNameSet();
		},
		onShow: function() {
			this.GetUserBalance();
			
			
		},
		methods: {
			agree:function(){
				this.agree1=!this.agree1;
			},
			changeRecharge:function(){
				var currentVUE = this;
				
				if(currentVUE.RechargeSet.IsFixedAmount==0 || currentVUE.RechargeSet.IsFixedAmount==3)
				{
					if(currentVUE.recharge<currentVUE.RechargeSet.MinRechareMoney)
					{
						tools.showToast("单次最低充值金额为"+currentVUE.RechargeSet.MinRechareMoney+"元");
						currentVUE.recharge=currentVUE.RechargeSet.MinRechareMoney;
						currentVUE.sumSend(currentVUE.recharge);
					}else{
						currentVUE.sumSend(currentVUE.recharge);
					}
				}
				
				if(!tools.IsMoney(currentVUE.recharge) || currentVUE.recharge.length>9)
				{
					tools.showToast("输入金额不合法");
					currentVUE.recharge=0;
					currentVUE.sumSend(currentVUE.recharge);
					return;
				}
			},
			selectMoney(index,recharge) {
				this.paymentIndex = index;
				this.recharge=recharge;
				this.sumSend(recharge);
			    
			},
			sumSend:function(recharge){
					let currentPage = this;
					currentPage.send=0;
				if(currentPage.RechargeSet.SendStatus==1 && currentPage.RechargeSet.SendWay==1)
				{
					var list=new Array();
				     for(var i=0;i<currentPage.SendRule.length;i++)
					 {
						 list.push(parseFloat(currentPage.SendRule[i].recharge));
					 }
					 
					var nlist= list.sort();
					for(var j=nlist.length-1;j>=0;j--)
					{
						if(parseFloat(nlist[j])<=parseFloat(recharge))
						{
							for(var z=0;z<currentPage.SendRule.length;z++)
							{
								if(parseFloat(currentPage.SendRule[z].recharge)==parseFloat(nlist[j]))
								{
									currentPage.send=currentPage.SendRule[z].send;
									currentPage.send=parseInt(currentPage.send);
									break;
								}
							}
							break;
						}
					}
					
				}else if(currentPage.RechargeSet.SendStatus==1 && currentPage.RechargeSet.SendWay==2)
				{
					 let m= parseInt(recharge/currentPage.RechargeSet.LeiSendCondition);
					 if(m>0) currentPage.send=m*currentPage.RechargeSet.LeiSendMoney;
					 currentPage.send=parseInt(currentPage.send);
					}
					
					
			},
			GetUserBalance: function() {
				let currentPage = this;
				
				let params = {
					type: 'GET',
					url: '/api/UserInfo/GetUserBalance',
					data: {typeId:2},
					sCallback: function(response) {
						if (response.IsSuccess) {
							let userBalance = response.Data;
							currentPage.Balance = userBalance.LiveMoney;
			
						} else {
							uni.showToast({
								title: response.Msg
							});
						}
					}
				};
				base.request(params);
			},
			Recharge:function(){
					let currentPage = this;
					if(!currentPage.agree1)
					{
						tools.showToast("请阅读并且同意充值协议");
						return;
					}
					if(currentPage.RechargeSet.Status==0)
					{
						tools.showToast("充值没开启");
						return;
					}
					if(currentPage.recharge>0)
					{
						if(currentPage.RechargeSet.IsAudit==1)
						{
							uni.navigateTo({
							    url: '/pages/my/jfchongzhi3?money='+currentPage.recharge
							});
						}else{
							uni.navigateTo({
							    url: '/pages/my/jfchongzhi2?money='+currentPage.recharge
							});
						}
						
					}else{
						tools.showToast("请输入充值金额");
					}
				
			},
			GetRechargeSet: function() {
				let currentPage = this;
				
				let params = {
					type: 'GET',
					url: '/api/Recharge/GetRechargeSet',
					data: {type:2},
					sCallback: function(response) {
						if (response.IsSuccess) {
							currentPage.RechargeSet=response.Data;
							if(currentPage.RechargeSet.IsFixedAmount==1 || currentPage.RechargeSet.IsFixedAmount==3)
							{
								currentPage.FaceValue=currentPage.RechargeSet.FaceValue.split(',');
								currentPage.recharge=currentPage.FaceValue[0];
								currentPage.sumSend(currentPage.FaceValue[0]);
								
							}
							
							if(currentPage.RechargeSet.SendStatus==1 && currentPage.RechargeSet.SendWay==1)
							{
							
								currentPage.SendRule=eval(currentPage.RechargeSet.LadderSendRule);
							}
							
			
						} else {
							tools.showToast(response.msg);
						}
					}
				};
				base.request(params);
			},
			GetCurrencyNameSet: function() {
				let currentPage = this;
				
				let params = {
					type: 'GET',
					url: '/api/Recharge/GetCurrencyNameSet',
					data: {kind:2},
					sCallback: function(response) {
						if (response.IsSuccess) {
							if(response.Data!=null) currentPage.CaculateBili=response.Data.CaculateBili;
							else tools.showToast("请先设置积分币种");
							
			
						} else {
							tools.showToast(response.msg);
						}
					}
				};
				base.request(params);
			}

		},


	}
</script>

<style lang="scss">
	.uni-btn-main {
		background-color: #ff5e1f !important;
	}

	.img24 {
		width: 24rpx;
		height: 24rpx;
		position: relative;
		top: 5rpx;
	}

	.img74 {
		width: 74rpx;
		height: 74rpx;
	}

	.img30 {
		width: 30rpx;
		height: 30rpx;
	}

	.img36 {
		width: 36rpx;
		height: 36rpx;
	}

	.num {
		line-height: 82rpx;
		height: 82rpx;
		border-radius: 10rpx;
		background-color: #F7F7F7;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 20rpx;
		padding: 0 30rpx;
		min-width: 120rpx;
		margin-bottom: 20rpx;
	}

	.num1 {
		border: solid 2rpx #ff5e1f;
		color: #ff5e1f;
		background-color: #FFFFFF;
	}

	.bottom_bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 95rpx;
		line-height: 95rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 15rpx 0px rgba(0, 0, 0, 0.05);
		padding: 0 30rpx;
	}

	.cz_btn {
		width: 173rpx;
		height: 68rpx;
		line-height: 68rpx;
		background-color: #ff5e1f;
		border-radius: 34rpx;
		display: inline-block;
		text-align: center;
		font-size: 30rpx;
		color: #ffffff;
	}
</style>
